<template>
  <div class="app-container Withdrawal">
    <!-- 快速筛选 -->
    <div class="select">
      <comSelect :options="comSelectOptions"></comSelect>
      <el-button
        size="mini"
        plain
        type="primary"
        icon="el-icon-s-tools"
        class="setting-btn"
        @click="settingDialog.dialogVisible = !settingDialog.dialogVisible"
        >提现设置</el-button
      >
    </div>
    <!-- 查询 -->
    <div class="form">
      <comForm :list="comFormList"></comForm>
    </div>
    <!-- 批量操作 -->
    <div class="btn-box">
      <!-- <span class="title">批量操作</span>
      <el-button type="primary" plain size="mini">确认无误</el-button>
      <el-button plain size="mini">报错</el-button> -->
      <comMb8Button
        :config="comMb8ButtonConfig_btnBox"
        @handle="clickBtnGroup_btnBox"
      ></comMb8Button>
    </div>
    <!-- 表格 -->
    <comTable
      :list="comTableList"
      :modes="comTableMode"
      :pagination="comTablePagination"
      :config="comTableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <el-table-column
        class="operate"
        align="left"
        label="操作"
        :width="'100px'"
      >
        <el-button size="mini" plain type="primary" @click="clickBtn_Table()"
          >通过</el-button
        >
      </el-table-column>
    </comTable>
    <!-- 对话框 -->
    <comDialog
      :title="settingDialog.title"
      :dialogVisible="settingDialog.dialogVisible"
      @EventClose="settingDialogFn($event)"
      :width="'40%'"
    >
      <template>
        <div class="input-box" label-width="80px">
          <el-form v-model="setting_Form">
            <el-form-item label="最低提现金额（元）">
              <el-input
                class="input"
                v-model="setting_Form.minNum"
                placeholder="请输入金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="最高提现金额（元）">
              <el-input
                class="input"
                v-model="setting_Form.maxNum"
                placeholder="请输入金额"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button
          @click="settingDialog.dialogVisible = !settingDialog.dialogVisible"
          >取消</el-button
        >
        <el-button type="primary" @click="settingDialogSubmit">保存</el-button>
      </template>
    </comDialog>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";
import comSelect from "@/wss/components/comSelect.vue";
import comForm from "@/wss/components/comForm.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";
import comDialog from "@/wss/components/comDialog.vue";
export default {
  name: "Withdrawal",
  components: {
    comTable,
    comSelect,
    comForm,
    comMb8Button,
    comDialog,
  },
  data() {
    return {
      //------快速筛选------//
      comSelectOptions: {
        value: "all",
        title: "快速筛选",
        list: [
          {
            value: "all",
            label: "所有状态",
          },
          {
            value: "accounting",
            label: "待核算",
          },
          {
            value: "rejected",
            label: "被驳回",
          },
          {
            value: "completed",
            label: "已完成",
          },
        ],
      },

      //------From--------//
      comFormList: {
        modes: [
          {
            placeholder: "请输入提现单号",
            formType: "input",
            label: "提现单号",
            mode: "name",
            value: "",
          },
          {
            placeholder: "请输入用户昵称",
            formType: "input",
            label: "用户昵称",
            mode: "name",
            value: "",
          },
          {
            placeholder: "请选择提现方式",
            formType: "select",
            label: "提现方式",
            value: "全部",
            mode: "role",
            select: [
              {
                label: "全部",
                value: "全部",
              },
              {
                label: "支付宝提现",
                value: "支付宝提现",
              },
              {
                label: "微信提现",
                value: "微信提现",
              },
              {
                label: "银行卡提现",
                value: "银行卡提现",
              },
            ],
          },
          {
            placeholder: "",
            formType: "datePicker",
            label: "筛选时间",
            mode: "selectDate",
            pickerType: "monthrange",
            rangeSeparator: "～",
            startPlaceholder: "开始月份",
            endPlaceholder: "结束月份",
          },
        ],
      },
      //提现设置数据
      setting_Form: {
        minNum: "",
        maxNum: "",
      },

      //------- comMb8Button -------//
      comMb8ButtonConfig_btnBox: [
        {
          label: "批量通过",
          type: "primary",
          icon: "el-icon-check",
          clickBtn: "",
          vHasPermi: "",
          btnId: "confirm",
        },
        /* {
          label: "批量驳回",
          type: "",
          icon: "el-icon-close",
          clickBtn: "",
          vHasPermi: "",
          btnId: "reject",
        }, */
      ],

      //------- Table -------//
      comTableMode: [
        {
          type: "selection", //多选列
        },
        {
          label: "申请提现时间",
          mode: "申请提现时间",
          align: "center",
        },
        {
          label: "提现单号",
          mode: "提现单号",
          align: "center",
        },
        {
          label: "用户昵称",
          mode: "用户昵称",
          align: "center",
        },
        {
          label: "员工手机号",
          mode: "员工手机号",
          align: "center",
          width: "110px",
        },
        {
          label: "提现方式",
          mode: "提现方式",
          align: "center",
          width: "100px",
        },
        {
          label: "状态",
          mode: "状态",
          align: "center",
          width: "70px",
        },
        {
          label: "提现金额（元）",
          mode: "提现金额",
          align: "center",
        },
      ],
      comTableList: [],
      comTablePagination: {
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
      comTableConfig: {
        loading: false,
      },

      //------- comDialog -------//
      settingDialog: {
        title: "提现设置",
        dialogVisible: false,
      },
    };
  },

  mounted() {
    this.comTableList = [
      {
        申请提现时间: "2021-08-15 16:08:21",
        提现单号: "2021082490871849274",
        用户昵称: "曹建国",
        员工手机号: "12345678910",
        提现方式: "支付宝提现",
        状态: "待核算",
        提现金额: "5000.00",
      },
      {
        申请提现时间: "2021-08-20 16:08:21",
        提现单号: "2021082490871849211",
        用户昵称: "曹建国22",
        员工手机号: "12345654321",
        提现方式: "微信提现",
        状态: "待核算",
        提现金额: "2000.00",
      },
      {
        申请提现时间: "2021-08-20 16:08:21",
        提现单号: "2021082490871849211",
        用户昵称: "曹建国33",
        员工手机号: "12345654321",
        提现方式: "微信提现",
        状态: "待核算",
        提现金额: "2000.00",
      },
    ];
  },

  methods: {
    //------- 分页 -------//
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.comTablePagination.pageSize = val;
      //this.getWageList(this.comTablePagination);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.comTablePagination.pageNum = val;
      //this.getWageList(this.comTablePagination);
    },

    //------- 按钮组 -------//
    clickBtnGroup_btnBox(btnType, btnId) {
      console.log(btnType, btnId);
    },

    //------- 操作栏按钮 -------//
    //按钮事件
    clickBtn_Table() {
      console.log("通过！");
    },
    //------- 对话框 -------//
    settingDialogFn(state) {
      this.settingDialog.dialogVisible = state;
    },
    settingDialogSubmit() {
      this.settingDialog.dialogVisible = !this.settingDialog.dialogVisible;
      console.log(this.setting_Form);
    },
  },
};
</script>

<style lang="scss" scoped>
.Withdrawal {
  .select {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .setting-btn {
      margin-right: 40px;
    }
  }
  .form {
    padding-top: 10px;
  }
  .btn-box {
    .title {
      margin-right: 12px;
      font-size: 14px;
      font-weight: bold;
      color: #606266;
    }
    padding-bottom: 10px;
  }
  .input-box {
    text-align: center;
    .input {
      width: 70%;
    }
  }
  ::v-deep .el-date-editor--monthrange {
    width: 210px !important;
  }
}
</style>